/* 
    Document   : estilo
    Created on : 15-ago-2013, 11:41:04
    Author     : Angela
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
a img[vspace="10px"]{ 
    border: 5px #335599 outset;
}

*::selection {
    background: #000;
    color: #FFF;
}

html {
    background: url("../img/bg1.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 5% 15%;
}

body{
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    padding: 1%;
    border-radius: 10px;
    text-align: center;
    border-right: 4px solid black;
    border-bottom: 1px solid black;
    border-left: 4px solid black;
    border-top: 1px solid black;
    box-shadow: 0 0 20px #00F;
}

form{
    letter-spacing: 2px;
}

fieldset{
    border: 1px gray solid;
    border-radius: 10px;
}
center{ 
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
}
legend{
    text-align: left;
    color: #393fa2;
    text-transform: uppercase;
    font-weight: bolder;
    margin-left: 5%;
}

a{
    color: blue;
    text-decoration: none;
}

th[colspan="2"] {
    text-align: center;
}
input[type="submit"]:hover {
    text-decoration: blink;
}
.display table{
    font-size: 16px;
}
table{
    border-collapse: collapse;
}

thead{
    background: url("../img/thead.png");
}

div tr:nth-child(odd){
    background: url("../img/tr.png");
}

div tr:nth-child(even){
    background: url("../img/tbody.png");
}

div tbody tr:nth-child(odd):hover, div tbody tr:nth-child(even):hover{
    background: white;
    border: 1px black solid;
}

form th {
    text-align: right;
}
td {
    text-align: left;
}
h1.titulo {
    color: coral;
    font: bold 50px/0 'Yanone Kaffeesatz', arial, verdana, arial, sans-serif;
    text-shadow: 0 2px 0 #AA2421, 0 4px 0 #8E1E1B, 0 6px 0 #711816, 0 8px 0 #551210, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    position: absolute;
    left: 0px;
    right: 0px;
    top: -5px;
}
h3 {
    margin: 0px;
    padding: 0px;
}

input[type="submit"],
input[type="button"],
input[type="reset"]{
    display: inline-block;
    position: relative;
    cursor:pointer;
    color: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    padding: 5px 10px 6px;
    background-color: #2981E4;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border: 0;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: #2575CF;;
}
.desactivar, .desactivar:hover{
    background-color: #BCE !important;
}
.boton:active {
    top: 1px;
}

.successMessage {
    background: rgba(111, 222, 111, .2);
    border: 1px solid #0F0;
    background-image: url('../img/success.png');
}
.errorMessage {
    background: rgba(222, 111, 111, .2);
    border: 1px solid #F00;
    background-image: url('../img/error.png');
}
.successMessage, .errorMessage {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding-left: 50px;
    color: #FFF;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 40px 100%;
}

span.error {
    color: #F00;
}

/* 
    Document   : liveValidation
    Created on : 08-03-2013, 11:59:53 PM
    Author     : Angela
    Description:
        Purpose of the stylesheet follows.
*/

.LV_validation_message{
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
    letter-spacing: normal;
}

.LV_invalid {
    color:#CC0000;
    letter-spacing: normal;
}

.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}

.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}

/* 
    Document   : menu
    Created on : 08-03-2013, 11:59:53 PM
    Author     : Omar
    Description:
        Purpose of the stylesheet follows.
*/
/*menu{padding-left:15px; margin-top:15px;}
#menu li{list-style:none; float:left;}
#menu li a{display:block; 
height:20px; background:#99cccc;
border:1px solid; padding:2px;
text-decoration:none;
text-align:center; color:#000;
font-family:arial; font-size:15px;
font-weight:bold;}
#menu li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block; float:none; 
position:relative; padding:0px;}
#menu li:hover ul{display:block; padding-left:0px;}
#menu li ul li a{display:block;
}*/

#nav {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
    background:#335599 url('../img/bg.png') repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#7788aa url(../images/bg.png) repeat-x 0 -20px;
    color:#000;
    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#335599 url(../images/bg.png) repeat-x 0 -100px;
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:160px;
    top:0px;
   
}

.cerrarSesion {
    position:fixed;
    top: 0;
    right: 0;  
}
/* footer */
footer { 
 
  font: 100% 'News Cycle', arial, sans-serif;
  height: 30px;
  padding: 9px 0 15px 0;
  color: #FFF;
  text-align: center;
  background: #99cccc; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#444, #222);
  background: -o-linear-gradient(#444, #222);
  background: -webkit-linear-gradient(#444, #222);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #222;
}

/*footer p { 
  line-height: 1.7em;
  padding: 0 0 10px 0;
}*/

/*footer a { 
  color: #FFF;
  text-decoration: none;
}*/

footer a:hover { 
  color: #2575CF;
  text-shadow: none;
  text-decoration: underline;
  
}
/*
contenido*/
#content { 
  text-align: left;
  width: 440px;
  margin: 0 0 0 0;
  float: left;
  padding: 0 20px 20px 20px;
}

.note {
    position:relative;
    width:480px;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}

/* ROUNDED CORNERS VERSION
 * All modern browsers can produce this effect with a single pseudo-element.
 * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
 * As far as I can tell, this is the only cross-browser method for the moment.
 * Can't use this method for the simple effect because Opera 11 will only show backgrounds
 * through transparent borders if there is a border-radius applied.
 */
 
.note.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

.note.rounded:before {
    border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
    border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
}

.note p {margin:0;}
.note p + p {margin:1.5em 0 0;}


.bubble {
	clear: both;
	margin: 0px auto;
        
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);	
	position: relative; 
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 6px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

/*.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1;  displayed under bubble 
}

.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1;  displayed under bubble 
}*/

.info {
	padding: 60px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}
/*contenido de mision y vision*/
.bubble {
	clear: both;
	margin: 0px auto;
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);	
/*	position: relative; */
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
	font-size: 30px;
	color: #2981E4;
	padding-top: 33px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}

.info {
	padding: 60px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}
/*para poner los dos div ala par*/
#derecha{
    float: right;
}
#izquierda{
    float: left;
}